<script setup lang="ts">
const props = defineProps<{
  value?: string
  status?: 'text' | 'active' | 'icon'
}>()
</script>

<template>
  <nut-progress
    class="w-100%"
    :status="props.status || props.value === '100' ? 'text' : 'active'"
    :text-inside="true"
    :percentage="props.value || 0"
    stroke-color="linear-gradient(90.2123646937098deg, rgba(169, 252, 106, 1) 0%, rgba(39, 186, 151, 1) 100%)"
    stroke-width="20" text-color="#fff"
  />
</template>

<style lang="scss" scoped>
.service-content {
  height: calc(100vh - 480rpx);
  .service-item {
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.0980392156862745);
  }
}
</style>
